<template>
    <!-- 幸福存单 -->
    <div class="madp-financial-happiness">
        <div class="madp-info-card">
            <div class="madp-info-card-head">
                <img src="@/assets/img/financialShop/three-left.png" alt />
                <span>产品优势</span>
                <img src="@/assets/img/financialShop/three-right.png" alt />
            </div>
            <div class="madp-info-card-content1">
                <div>
                    <img src="@/assets/img/financialShop/xfcd-icon1.png" alt />
                    <p>资金安全</p>
                    <span>储蓄存款</span>
                </div>
                <div>
                    <img src="@/assets/img/financialShop/xfcd-icon2.png" alt />
                    <p>长期锁定</p>
                    <span>{{ info.descr }}存期</span>
                </div>
                <div>
                    <img src="@/assets/img/financialShop/xfcd-icon3.png" alt />
                    <p>利息较高</p>
                    <span>利率{{ info.rate }}%</span>
                </div>
            </div>
        </div>
        <div class="madp-info-card">
            <div class="madp-info-card-head">
                <img src="@/assets/img/financialShop/three-left.png" alt />
                <span>计息规则</span>
                <img src="@/assets/img/financialShop/three-right.png" alt />
            </div>
            <div class="madp-info-card-content2">
                <div class="content-item">
                    <p>起存金额</p>
                    <span>1万起存</span>
                </div>
                <div class="content-item">
                    <p>计息方式</p>
                    <span>
                        每笔"幸福存单(定制款)"存款周期为
                        {{ info.descr }}
                        ，按存入时的年利率在存入当日起息，到期支取时一次性支付本息；如提前支取（线上渠道仅支持全额提前支取），支取金额按活期存款利率计付息，剩余资金仍继续原存期及原利率。</span
                    >
                </div>
            </div>
        </div>
        <div class="madp-info-card">
            <div class="madp-info-card-head">
                <img src="@/assets/img/financialShop/three-left.png" alt />
                <span>常见问题</span>
                <img src="@/assets/img/financialShop/three-right.png" alt />
            </div>
            <el-collapse v-model="activeName" accordion>
                <el-collapse-item v-for="(item, index) in collapses" :key="index" :title="item.title" :name="index">
                    <div>{{ item.content }}</div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <share-btn :shareInfo="shareInfo" />
        <back-btn />
        <buy-btn btnText="立即存入" prodType="7" />
    </div>
</template>
<script>
    import financialApi from '@/api/financial-shop.js';
    import buyBtn from '@/components/buy-btn';
    import shareBtn from '@/components/share-btn';
    import backBtn from '@/components/back-btn.vue';
    import mxInitWxConfig from '@/mixin/mxInitWxConfig.js';
    export default {
        name: 'madp-financial-happiness-product',
        components: { buyBtn, shareBtn, backBtn },
        mixins: [mxInitWxConfig],
        data() {
            return {
                shareInfo: {},
                info: {},
                activeName: '',
                collapses: [
                    {
                        title: '"幸福存单(定制款)"是什么？',
                        content:
                            '"幸福存单(定制款)"是华融湘江银行推出的1万起存、5年存期的人民币定期储蓄存款业务，具有利息较高、长期锁定、资金安全等特点。"幸福存单(定制款)"以幸福为主题，可以较好满足客户"为自己存下幸福、为亲朋好友送上幸福"的诉求。'
                    },
                    {
                        title: '"幸福存单(定制款)"业务资金安全吗？',
                        content: '"幸福存单(定制款)"属于存款业务，能完全满足客户对于资金安全的需求。'
                    },
                    {
                        title: '"幸福存单(定制款)"如何计付利息？',
                        content:
                            '每笔"幸福存单(定制款)"存款周期为5年，按存入时的年利率在存入当日起息，到期支取时一次性支付本息；如提前支取（线上渠道仅支持全额提前支取），支取金额按活期存款利率计付息，剩余资金仍继续原存期及原利率。'
                    },
                    {
                        title: '"幸福存单(定制款)"在哪里办理？',
                        content:
                            '您目前可在我行网点柜面、轻型柜台、手机银行（以下简称"上述办理渠道"）办理"幸福存单(定制款)"的存入、支取、查询等交易。其中：（1）网点柜面、轻型柜台等线下渠道（支持借记卡及存折办理）存入的为纸质存单，可在上述办理渠道查询，线上渠道无法办理支取。（2）手机银行（仅支持借记卡办理）存入的无纸质存单可在上述办理渠道查询；线下仅限网点柜面支取（网点柜面查询时展示为五年期定期储蓄存款、轻柜"余额查询"中展示为整存整取-定期五年）。'
                    },
                    {
                        title: '办理"幸福存单(定制款)"收手续费吗？',
                        content: '"幸福存单(定制款)"的购买、支取、信息查询交易均不收取手续费。'
                    }
                ]
            };
        },
        watch: {
            wxUserId() {
                if (this.wxUserId) {
                    let params = this.$route.query;
                    this.type = params.type;
                    this.getDepositList();
                }
            }
        },
        created() {},
        mounted() {},
        activated() {
            let params = this.$route.query;
            document.title = params.titleName || '幸福存单';
            this.shareInfo = {
                title: params.titleName || '幸福存单', // 分享标题
                desc: '幸福存单，存下幸福，1万起存，5年存期', // 分享描述
                link: this.$utils.getShareUrl(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: `${this.$utils.apiUrl}/mfs/avatar.jpg`
            };
            console.log('pppp', this.shareInfo);
            this.$wxShare.setShareInfo(this.shareInfo);
        },
        deactivated() {
            this.wxUserId = '';
        },
        methods: {
            // 存款信息
            getDepositList() {
                financialApi
                    .getDepositList({
                        type: this.type
                    })
                    .then((res) => {
                        let list = res.data.data;
                        this.info = list[0];
                        let params = this.$route.query;
                        this.$sensorsSend('DepositView', {
                            from_page_name: sessionStorage.getItem('from_page_name') || '',
                            recommend_id: this.$route.query.wxUserId || this.$store.state.vuex_wxUserId || this.wxUserId,
                            deposit_type: params.titleName,
                            deposit_number: params.type,
                            deposit_name: params.titleName
                        });
                    });
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-financial-happiness {
        width: 100%;
        min-height: 100vh;
        // overflow-y: scroll;
        padding-top: 130px;
        background-image: url('../../assets/img/financialShop/xfcd-bg.png');
        background-position: 0 -50px;
        background-repeat: no-repeat;
        background-size: 100%;
        background-color: #efefef;
        padding-bottom: 4rem;
        .madp-info-card {
            margin: 12px 15px;
            background: #fff;
            box-shadow: 0 5px 10px rgba(211, 198, 182, 0.3);
            border-radius: 8px;
            padding: 18px 12px;
            &-head {
                display: flex;
                justify-content: center;
                margin-bottom: 20px;
                span {
                    display: inline-block;
                    margin: 0 12px;
                    font-size: 14px;
                    font-weight: bold;
                    color: #ed5555;
                }
                img {
                    width: 36px;
                    height: 4px;
                    top: 8px;
                    position: relative;
                }
            }
            &-content1 {
                margin: 15px 0;
                display: flex;
                justify-content: space-around;
                div {
                    width: 22%;
                    text-align: center;
                    color: #2c2c2c;
                    font-size: 14px;
                    img {
                        width: 50%;
                    }
                    p {
                        font-weight: 500;
                        line-height: 20px;
                    }
                    span {
                        font-weight: 400;
                        opacity: 0.5;
                        font-size: 12px;
                    }
                }
            }
            &-content2 {
                padding: 0 6%;
                margin-top: 30px;
                .content-item {
                    margin-top: 20px;
                    p {
                        border-left: 2px solid #ed5555;
                        padding-left: 6px;
                        font-weight: 600;
                        font-size: 14px;
                        margin: 4px 0;
                    }
                    span {
                        font-weight: 400;
                        padding-left: 7px;
                        color: #2c2c2c;
                        opacity: 0.5;
                        font-size: 12px;
                        display: inline-block;
                    }
                }
            }
        }
        .madp-btn {
            width: 321px;
            height: 40px;
            background: #ed5555;
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
            margin: 0 auto;
            font-size: 16px;
            color: #fff;
            margin-top: 3rem;
        }
    }
</style>
